<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素样式/尺寸操作</title>
        <!-- 元素样式操作：直接操作元素的样式下的属性和属性值
         css()          功能---
                        1个参：传入css属性值
                        功能：获取匹配元素集合中第一个元素的css属性值
                        2个参：传入css属性名和属性值
                        功能：设置匹配元素集合中所有元素的css属性值
                        n个参：传入多个css属性名和属性值
                        语法糖：css({"属性名":"属性值",
                                    "属性名":"属性值",
                                    ......
                                    "属性名":"属性值"
                                    })
         width()和height()   功能：匹配元素集合中第一个元素宽高度
                             无参：获取匹配元素集合中第一个元素宽高度
                             有参：设置匹配元素集合中第一个元素宽高度
                             width(数值)
         
         outerWidth()和outerHeight()
         出现原因:元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		 无参：获取元素的宽高度，计算盒子模型：内边距+边框
		 有参：传入bool值，true时，计算盒子模型：内外边距+边框
         -->
         <style>
             .box{
                 background: #88ee99;
                 margin: 20px;
                 padding: 20px;
                 border: 5px solid #d2f69c;
             }
             .result{
                 margin-top: 10px;
                 font-weight: bold;
             }
         </style>
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- css:   .box添加样式：背景颜色、内外边距：20px 边框：5px
                    .result添加样式：上外边距：10px，字体加粗
            引入jq框架
         -->
        <!-- 1.显示效果区域 -->
        <div class="box" id="targetBox"></div>
        <button id="getColorbtn">获取颜色属性值</button>
        <button id="setColorbtn">设置颜色效果</button>
        <button id="setBtn">设置多属性效果</button>
        <button id="gsBtn">获取元素宽度/设置元素宽度</button>
        <button id="bpbtn">获取高度（内边距+边框）</button>
        <button id="bpmbtn">获取高度（内外边距+边框）</button>
        <!-- 2.结果提示功能区域 -->
        <div class="result" id="result"></div>
        <script>
            // 1.点击 获取颜色属性值 按钮  获取颜色值并打印页面上
            $("#getColorbtn").click(function(){
              alert("111")
            });
            // 2.点击 设置颜色效果 按钮  获取颜色值并打印页面上
            $("#setColorbtn").click(function(){
                // 改成橙色
                $(".box").css("background-color","orange");
                $("#result").text("改变后颜色为：橙色");
            });
            // 3.点击 设置多属性效果 按钮 圆、背景色、阴影
            $("#setBtn").click(function(){
                $(".box").css({
                                "background-image":"url(../img/123.png)",
                                "border":"5px solid #ff0",
                                "width":"300px",
                                "height":"300px",
                                "background-size":"100%",
                                "border-radius":"50%",
                                "box-shadow":"2px 2px 5px"
                });
            });
            // 4.点击 获取、设置宽度 1233222
            $("#gsBtn").click(function(){
                var w=$(".box").width();
                $("#result").text("获取宽度是"+w+"px")
            });
            // 5.点击 获取高度 按钮 计算box空间高度
            $("#bpbtn").click(function(){
                var bp=$(".box").outerHeight();
                $("#result").text("获取高度是"+bp+"px");
            });
            $("#bpmbtn").click(function(){
                var bpm=$(".box").outerHeight(true);
                $("#result").text("获取高度是"+bpm+"px");
                
            });
        </script>
    </body>
</html>